<template>
	<div class="navigation-page">
		<!-- 资源列表 -->
		<div v-for="item in categories" class="resource-list" :key="item.value" :id="item.name">
			<el-row justify="center" align="middle">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<!-- 分类信息 -->
					<div
						class="w-[98%] category-info pb-2 flex justify-between items-center relative mx-auto">
						<div
							ref="allCategoryBtn"
							@click.stop="allCategoriesDialogVisible = true"
							class="all-category text-sm text-gray-500 hover:text-blue-500 cursor-pointer flex items-center z-10">
							<icon class="mr-1" name="material-symbols:list-alt-outline-rounded" :size="18" />
							<span>所有分类</span>
						</div>
						<category-selector
							class="z-10"
							:categories="item"
							@on-active-change="handleActiveChange" />
						<div
							ref="moreBtn"
							class="more text-sm flex items-center cursor-pointer text-gray-500 hover:text-blue-500 z-10">
							<span>更多</span>
							<icon name="material-symbols:chevron-right-rounded" :size="18" />
						</div>
						<div class="line absolute w-full h-full flex items-center justify-center z-0">
							<div
								class="border transition-all duration-500 ease-in-out"
								style="width: calc(100% - 200px)"></div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :xs="12" :sm="6" :md="6" :lg="4" :xl="4" v-for="item in 10" :key="item">
					<div class="res-item p-3">
						<resource-card
							name="蓝云博客"
							:visit-count="1000"
							url="https://lanyunblog.com/"
							desc="一个分享技术、生活、感悟的博客"
							icon="https://lanyunblog.com/favicon.ico" />
					</div>
				</el-col>
			</el-row>
		</div>
		<dialog-com v-model="allCategoriesDialogVisible" title="所有分类">
			<div class="flex flex-wrap justify-center">
				<div
					v-for="item in categories"
					@click.stop="allCategoriesDialogVisible = false"
					class="c-name p-2 cursor-pointer text-gray-500 hover:text-blue-500 text-base"
					:key="item.value">
					<nuxt-link :to="`#${item.name}`">
						{{ item.name }}
					</nuxt-link>
				</div>
			</div>
		</dialog-com>
	</div>
</template>

<script name="NavigationPage" lang="ts" setup>
import type { CategorySelector } from '~/components/CategorySelector/index.vue';

// 所有分类弹窗显示状态
const allCategoriesDialogVisible = ref<boolean>(false);

const categories: CategorySelector[] = [
	{
		name: 'AI工具',
		value: 'ai-tools',
		subCategories: [
			{ name: '图像处理', value: 'image-processing' },
			{ name: 'PPT生成', value: 'ppt-generation' },
			{ name: '视频处理', value: 'video-processing' },
			{ name: '文字处理', value: 'text-processing' },
			{ name: '数据分析', value: 'data-analysis' },
			{ name: '语音合成', value: 'speech-synthesis' },
			{ name: '代码生成', value: 'code-generation' },
		],
	},
	{
		name: '自然语言处理',
		value: 'nlp',
		subCategories: [
			{ name: '机器翻译', value: 'machine-translation' },
			{ name: '情感分析', value: 'sentiment-analysis' },
			{ name: '文本摘要', value: 'text-summarization' },
			{ name: '命名实体识别', value: 'ner' },
			{ name: '对话系统', value: 'dialogue-systems' },
		],
	},
	{
		name: '机器学习平台',
		value: 'ml-platforms',
		subCategories: [
			{ name: '模型训练', value: 'model-training' },
			{ name: '预测分析', value: 'predictive-analytics' },
			{ name: '特征工程', value: 'feature-engineering' },
			{ name: '模型部署', value: 'model-deployment' },
			{ name: '超参数调优', value: 'hyperparameter-tuning' },
		],
	},
	{
		name: '云计算服务',
		value: 'cloud-services',
		subCategories: [
			{ name: '存储服务', value: 'cloud-storage' },
			{ name: '计算服务', value: 'cloud-computing' },
			{ name: '数据库管理', value: 'database-management' },
			{ name: 'Serverless架构', value: 'serverless' },
			{ name: 'CDN加速', value: 'cdn-acceleration' },
		],
	},
	{
		name: '区块链应用',
		value: 'blockchain',
		subCategories: [
			{ name: '智能合约', value: 'smart-contracts' },
			{ name: '去中心化金融', value: 'defi' },
			{ name: '供应链溯源', value: 'supply-chain' },
			{ name: '数字身份认证', value: 'digital-identity' },
			{ name: 'NFT开发', value: 'nft-development' },
		],
	},
	{
		name: '物联网开发',
		value: 'iot',
		subCategories: [
			{ name: '传感器集成', value: 'sensor-integration' },
			{ name: '边缘计算', value: 'edge-computing' },
			{ name: '设备管理', value: 'device-management' },
			{ name: 'LPWAN技术', value: 'lpwan' },
			{ name: 'OTA升级', value: 'ota-updates' },
		],
	},
];

// 子分类选择
const handleActiveChange = (val: any): void => {
	console.log('val: ', val);
};

definePageMeta({
	keepalive: true,
});
</script>

<style lang="scss" scoped>
// 资源列表
.resource-list {
	margin: 30px auto;
	max-width: 1200px;
}

@media screen and (max-width: 768px) {
	.res-item {
		padding: 8px 10px;
	}
}

.c-name {
	&::after {
		width: 0;
		content: '';
		height: 2px;
		display: block;
		transition: all 0.3s;
		background-color: #3b82f6;
	}

	&:hover {
		&::after {
			width: 100%;
		}
	}
}
</style>
